<template>
  <div id="CreateCustomerOrder">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">客户管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户信息管理</strong><span>/</span></li>
        <li><strong>新增订单</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">

        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>新增订单</h2>
          <hr>
        </div>

        <form action="">
          <div class="row" style="margin-bottom: 30px">
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4>类型:</h4>
            </div>
            <div class="col-sm-3 col-md-3">
              <select v-on:change="loadproductSeries" v-model="productVo.productType" class="form-control" style="width: 180px;">
                <option value="">--请选择产品类型--</option>
                <option v-for="item in productTypes" :value="item.dictionaryEntry">{{item.dictionaryEntry}}</option>
              </select>
            </div>
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4>系列:</h4>
            </div>
            <div class="col-sm-2 col-md-2">
              <select v-on:change="loadProductModels" v-model="productVo.productSeries" class="form-control" style="width: 100px">
                <option value="" >--请选择产品系列--</option>
                <option v-for="item in productSeries" :value="item.productSeries" >{{item.productSeries}}</option>
              </select>
            </div>
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4>型号:</h4>
            </div>
            <div class="col-sm-2 col-md-2">
              <select v-model="productVo.productModel" class="form-control" style="width: 100px">
                <option value="" >--请选择产品型号--</option>
                <option v-for="item in productModels" :value="item.productModel" >{{item.productModel}}</option>
              </select>
            </div>
            <div class="col-sm-2 col-md-2">
              <button v-on:click="addProduct" class="btn btn-primary">添加</button>
            </div>
          </div>

        </form>

        <form action="">
          <table class="table">
            <thead>
            <tr>
              <th>编号</th>
              <th>系列</th>
              <th>型号</th>
              <th>类型</th>
              <th>单价</th>
              <th>数量</th>
              <th>价格</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in products">
              <th>{{index+1}}</th>
              <td>{{item.productSeries}}</td>
              <td>{{item.productModel}}</td>
              <td>{{item.productType}}</td>
              <td>{{item.productPrices}}</td>
              <td>
                <input  v-on:blur="checkProcuctNum(index)" type="text" :id="'productNum'+index" class="form-control" placeholder="请输入产品数量" style="width: 120px;height: 30px">
              </td>
              <td>{{item.productPrices*item.commodityNum}}</td>
              <td>
                <button v-on:click="removeProduct(index)" class="btn btn-danger btn-sm">删除</button>
              </td>
            </tr>
            </tbody>
          </table>

          <div  class="row">
            <div class="col-sm-10"></div>
            <div v-show="totalPrice != 0">
              <p style="font-size: 20px;font-weight: bolder">
                总价：{{totalPrice}}
              </p>
            </div>
          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <button v-on:click="saveOrder" class="btn btn-primary">保存</button>
            <button v-on:click="toCustomerOrderList" class="btn btn-default">返回</button>
          </div>
        </form>

      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "CreateCustomerOrder",
  data(){
    return{
      totalPrice:0,
      customerId:'',
      customerName:'',
      products:[],
      productVo:{
        productType:'',
        productSeries:'',
        productModel:'',
      },
      productTypes:[],
      productSeries:[],
      productModels: [],
    }
  },
  methods:{
    saveOrder(){
      if (this.products==''){
        this.$message({
          showClose: true,
          message: '订单中的商品不能为空哦，请先添加商品',
          type: 'error'
        });
        return;
      }else if (this.checkProductNumIsNull() == false){
        this.$message({
          showClose: true,
          message: '订单中有商品未输入需要商品的数量，请添加',
          type: 'error'
        });
        return;
      }else if (this.checkProductNumIsNull() != false){
        this.$axios.post('/order/saveOrder',this.products).then(
          res=>{
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'success'
            });
            this.$router.push({path:'/MemuBar/CustomerOrderList',
              query:{
                customerId:this.customerId,customerName:this.customerName
              }})
          }
        )
      }
    },
    removeProduct(index){
      this.$delete(this.products,index)
      // console.log(this.products)
      console.log(this.products)
    },
    toCustomerOrderList(){
      this.$router.push({path:'/MemuBar/CustomerOrderList',
        query:{
          customerId:this.customerId,customerName:this.customerName
      }})
    },
    addProduct(){

      if (this.checkProductType()){
        if (this.checkProductSeries()){
          if (this.checkProductModel()){
            this.checkRepeat()
            if (this.products.length==0){
              this.$axios.get("/product/ProductTypeAndProductSeriesAndProductModel", {
                params: {
                  productType: this.productVo.productType,
                  productSeries: this.productVo.productSeries,
                  productModel: this.productVo.productModel
                }
              }).then(
                res => {
                  var product = {}
                  product.productId = res.data.data.productId
                  product.productSeries = res.data.data.productSeries
                  product.productPrices = res.data.data.productPrices
                  product.productModel = res.data.data.productModel
                  product.productType = res.data.data.productType
                  product.customerId = this.customerId
                  product.commodityNum = 0
                  this.products.push(product)
                }
              )
            }else {
              if (this.checkRepeat() != false) {
                this.$axios.get("/product/ProductTypeAndProductSeriesAndProductModel", {
                  params: {
                    productType: this.productVo.productType,
                    productSeries: this.productVo.productSeries,
                    productModel: this.productVo.productModel
                  }
                }).then(
                  res => {
                    var product = {}
                    product.productId = res.data.data.productId
                    product.productSeries = res.data.data.productSeries
                    product.productPrices = res.data.data.productPrices
                    product.productModel = res.data.data.productModel
                    product.productType = res.data.data.productType
                    product.customerId = this.customerId
                    product.commodityNum = 0
                    this.products.push(product)
                  }
                )
              }
            }
          }
        }
      }
    },
    checkRepeat(){
      for (let i = 0; i < this.products.length; i++) {
        if (this.products[i].productSeries==this.productVo.productSeries){
          if (this.products[i].productType == this.productVo.productType){
            if (this.products[i].productModel==this.productVo.productModel){
              this.$message({
                showClose: true,
                message: '产品您已选择过，请勿重复选择',
                type: 'error'
              });
              return false;
            }
          }
        }else {
          continue;
        }
      }
    },
    checkProductType(){
      if (this.productVo.productType == ""){
        this.$message({
          showClose: true,
          message: '请选择产品类型',
          type: 'error'
        });
        return false
      }else return true
    },
    checkProductSeries(){
      if (this.productVo.productSeries == ""){
        this.$message({
          showClose: true,
          message: '请选择产品系列',
          type: 'error'
        });
        return false
      }else return true
    },
    checkProductModel(){
      if (this.productVo.productModel == ""){
        this.$message({
          showClose: true,
          message: '请选择产品模型',
          type: 'error'
        });
        return false
      }else return true
    },
    loadCustomerIdAndName(){
      this.customerId=this.$route.query.customerId
      this.customerName=this.$route.query.customerName
    },
    loadProductDatas(){
      this.$axios.get('/dictionary/loadProductType').then(
        res=>{
          this.productTypes=res.data.data
        }
      )
      this.$axios.get('/product/loadProductSeriesByProductType').then(
        res=>{
          this.productSeries=res.data.data
        }
      )
      this.$axios.get('/product/loadProductModelsByProductSeries').then(
        res=>{
          this.productModels=res.data.data
        }
      )
    },
    loadproductSeries(){
      this.productModels=[]
      this.$axios.get('/product/loadProductSeriesByProductType',{
        params:{
          productType:this.productVo.productType
        }
      }).then(
        res=>{
          this.productSeries=res.data.data
        }
      )
    },
    loadProductModels(){
      this.$axios.get('/product/loadProductModelsByProductSeries',{
        params:{
          productSeries:this.productVo.productSeries
        }
      }).then(
        res=>{
          // console.log(res.data.data)
          this.productModels=res.data.data
        }
      )
    },
    checkProcuctNum(index){
      if (document.getElementById($("input").eq(index).attr("id")).value<1){
        this.$message({
          showClose: true,
          message: '产品的数量必须大于0',
          type: 'error'
        });
      }else {
        this.products[index].commodityNum=document.getElementById($("input").eq(index).attr("id")).value
        this.totalPrice=0;
        for (let i = 0; i < this.products.length; i++) {
          this.totalPrice+=this.products[i].productPrices*this.products[i].commodityNum
        }
      }
    },
    checkProductNumIsNull(){
      for (let i = 0; i < this.products.length; i++) {
        if (this.products[i].commodityNum<1){
          return false;
        }else {
          continue
        }
      }
    }
  },
  created() {
    this.loadCustomerIdAndName()
    this.loadProductDatas()
  }
}
</script>

<style scoped>

</style>
